<template>
  <div class="live-room">
    <!-- 头部：分享功能 -->
    <div class="room-title clear">
      <span class="room-title-link fl" @click="back">
        <i class="ipng Shape_07"></i>
        <strong>{{ bigLiveData.name }}</strong>
      </span>
      <div class="room-share fr">
        <share :wapPath="wapPath"></share>
      </div>
    </div>
    <section class="loading-box">
      <div class="room-content">
        <section class="live-view-box clear">
          <div class="live-view-l fl">
            <!-- 直播播放器 -->
            <div class="video-box" ref="barrage_wrap">
              <livePlayer
               v-if="isM3u8===2 && bigLiveData.play_url"
                :liveOptions.sync="bigLiveData"
                @isLiveEnd="checkLiveEnd"
                @isLimit="checKLimted"
              ></livePlayer>
              <m3u8Dplayer
                v-if="m3u8Data.pc_play_url && isM3u8 === 1"
                :options="m3u8Data"
                @isLiveEnd="checkLiveEnd"
              >
              </m3u8Dplayer>
            </div>
            <!-- 弹幕开关 -->
            <div class="barrage-switch">
              <template v-if="!isLimited">
                <span
                  :class="[barrageOrNot == true ? '' : 'white-switch']"
                  @click="changeBarrageStatus"
                  >{{
                    barrageOrNot == true ? "弹幕已开启" : "弹幕已关闭"
                  }}</span
                >
              </template>
            </div>
          </div>
          <!-- 右侧讨论区 -->
          <div class="live-view-r frosted-glass fr">
            <template v-if="!isLimited">
              <nav>
                <span :class="[isDiscuss ? 'lActive' : '']">
                  <i class="ipng chat"></i>
                  <i>讨论区</i>
                </span>
                <!-- <span :class="[isDiscuss?'lActive':'']" @click="tabTool"><i class="ipng chat"></i><i>讨论区</i></span> -->
                <!-- <span :class="[!isDiscuss?'lActive':'']" @click="tabTool"><i class="ipng note"></i><i>笔记</i></span> -->
              </nav>
              <div class="discuss-content" v-if="isDiscuss">
                <template>
                  <el-tabs class="view-r-tabs" v-model="activeDiscuss">
                    <el-tab-pane
                      label="讨论区"
                      name="1"
                      class="discuss-tab-pane"
                    >
                      <vue-scrollbar
                        class="my-scrollbar discuss-scrollbar"
                        ref="Scrollbar"
                      >
                        <ul class="discuss-ul" id="dicussUl">
                          <li
                            class="clear"
                            v-for="(item, index) of discussData"
                            :key="index"
                          >
                            <span
                              :class="[
                                userId == item.create_id
                                  ? 'speaker-name green-c'
                                  : 'speaker-name',
                              ]"
                              >{{ item.user_name }}:</span
                            >
                            <p class="speak-words">{{ item.content }}</p>
                          </li>
                          <div
                            v-if="discussData.length === 0"
                            class="no-data-tip"
                          >
                            - 暂无数据 -
                          </div>
                        </ul>
                      </vue-scrollbar>
                      <div class="sendcomment-box">
                        <el-input
                          placeholder="写下你想说的话~"
                          maxlength="200"
                          v-model.trim="content"
                          @keyup.enter.native="sendComment"
                        >
                          <el-button slot="append" @click="sendComment"
                            >发送</el-button
                          >
                        </el-input>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="成员" name="2" class="member-tab-pane">
                      <vue-scrollbar class="my-scrollbar member-scrollbar">
                        <ul class="member-ul">
                          <li
                            class="clear"
                            v-for="(item, index) of onlineUserData"
                            :key="index"
                          >
                            <template>
                              <span
                                class="member-name"
                                :title="item.name"
                                :class="[userId == item.id ? 'green-c' : '']"
                                >{{ item.name }}</span
                              >
                              <span
                                class="member-identity"
                                :title="item.role_basename"
                                :class="[userId == item.id ? 'green-c' : '']"
                              >
                                <i>{{ item.role_basename }}</i>
                              </span>
                            </template>
                            <template v-if="item.check_power == true">
                              <i
                                class="mic-icon-allow"
                                v-if="item.live_forbidden_flag == false"
                                @click="
                                  forbidWords(item.id, item.live_forbidden_flag)
                                "
                              ></i>
                              <i
                                class="mic-icon-forbid"
                                v-else
                                @click="
                                  forbidWords(item.id, item.live_forbidden_flag)
                                "
                              ></i>
                            </template>
                          </li>
                        </ul>
                      </vue-scrollbar>
                      <p class="member-tips">该列表仅显示登陆用户</p>
                    </el-tab-pane>
                  </el-tabs>
                </template>
              </div>
              <div class="note-content" v-if="!isDiscuss">
                <template>
                  <el-tabs class="view-r-tabs" v-model="activeNote">
                    <el-tab-pane
                      label="个人的笔记"
                      name="1"
                      class="person-note-pane"
                    >
                      <div class="textarea">
                        <el-input
                          type="textarea"
                          :rows="4"
                          resize="none"
                          v-model.trim="myNoteContent"
                          maxlength="200"
                          placeholder="请输入笔记内容~"
                        ></el-input>
                        <span class="numberWord">
                          <i>{{ myNoteContent.length }}</i>
                          <i class="gerycolor">/200</i>
                        </span>
                      </div>
                      <div class="shoot-img clear">
                        <template>
                          <i class="ipng but_addamage"></i>
                          <el-checkbox v-model="shootFlag"
                            >是否截图</el-checkbox
                          >
                        </template>
                        <el-button
                          class="fr"
                          size="small"
                          type="primary"
                          v-loading.fullscreen="noteLoading"
                          element-loading-spinner="el-icon-loading"
                          element-loading-background="rgba(0, 0, 0, .6)"
                          element-loading-text="数据保存中，请勿刷新"
                          @click="addPersonNote"
                        >
                          确定
                        </el-button>
                      </div>
                      <vue-scrollbar class="my-scrollbar myNote-scrollbar">
                        <ul class="note-ul clear">
                          <template v-for="(item, index) of allNoteData">
                            <li
                              class="note-li clear"
                              :key="index"
                              v-if="item.create_id == userId"
                            >
                              <a href="javascript:;"
                                ><img :src="BASE_URL + item.avatar_path"
                              /></a>
                              <div class="note-li-text">
                                <span class="note-creater">{{
                                  item.name
                                }}</span>
                                <div class="note-content">
                                  {{ item.content }}
                                </div>
                                <div
                                  class="edit-content-box clear"
                                  v-if="item.id == noteId"
                                >
                                  <div class="textarea">
                                    <el-input
                                      type="textarea"
                                      :rows="4"
                                      resize="none"
                                      v-model.trim="contentEdited"
                                      maxlength="200"
                                      placeholder="输入编辑内容~"
                                    ></el-input>
                                    <span class="numberWord">
                                      <i>{{ contentEdited.length }}</i>
                                      <i class="gerycolor">/200</i>
                                    </span>
                                  </div>
                                  <el-button
                                    class="fr"
                                    size="small"
                                    type="primary"
                                    @click="sureEditNote"
                                    >确定</el-button
                                  >
                                </div>
                                <el-card
                                  v-if="item.picture != ''"
                                  class="img-card"
                                  shadow="hover"
                                >
                                  <img :src="BASE_URL + item.picture" />
                                  <div class="tips-word" @click="seePic(item)">
                                    <span>查看图片</span>
                                  </div>
                                </el-card>
                                <div class="note-li-bottom clear">
                                  <span>{{ item.create_time }}</span>
                                  <i
                                    v-if="item.create_id == userId"
                                    class="ipng fr but_del i_delVideo delnote"
                                    title="删除"
                                    @click="delNote(item)"
                                  ></i>
                                  <i
                                    v-if="item.create_id == userId"
                                    class="
                                      ipng
                                      fr
                                      but_edit01
                                      i_editVideo
                                      editnote
                                    "
                                    title="编辑"
                                    @click="editNote(item)"
                                  ></i>
                                </div>
                              </div>
                            </li>
                          </template>
                        </ul>
                      </vue-scrollbar>
                    </el-tab-pane>
                    <el-tab-pane label="大家的笔记" name="2">
                      <vue-scrollbar class="my-scrollbar allNote-scrollbar">
                        <ul class="note-ul">
                          <li
                            class="note-li clear"
                            v-for="(item, index) of allNoteData"
                            :key="index"
                          >
                            <a href="javascript:;"
                              ><img :src="BASE_URL + item.avatar_path"
                            /></a>
                            <div class="note-li-text">
                              <span class="note-creater">{{ item.name }}</span>
                              <div class="note-content">{{ item.content }}</div>
                              <div
                                class="edit-content-box clear"
                                v-if="item.id == noteId"
                              >
                                <div class="textarea">
                                  <el-input
                                    type="textarea"
                                    :rows="4"
                                    resize="none"
                                    v-model.trim="contentEdited"
                                    maxlength="200"
                                    placeholder="输入编辑内容~"
                                  ></el-input>
                                  <span class="numberWord">
                                    <i>{{ contentEdited.length }}</i>
                                    <i class="gerycolor">/200</i>
                                  </span>
                                </div>
                                <el-button
                                  class="fr"
                                  size="small"
                                  type="primary"
                                  @click="sureEditNote"
                                  >确定</el-button
                                >
                              </div>
                              <el-card
                                v-if="item.picture != ''"
                                class="img-card"
                                shadow="hover"
                              >
                                <img :src="BASE_URL + item.picture" />
                                <div class="tips-word" @click="seePic(item)">
                                  <span>查看图片</span>
                                </div>
                              </el-card>
                              <div class="note-li-bottom clear">
                                <span>{{ item.create_time }}</span>
                                <i
                                  v-if="item.create_id == userId"
                                  class="ipng fr but_del i_delVideo delnote"
                                  title="删除"
                                  @click="delNote(item)"
                                ></i>
                                <i
                                  v-if="item.create_id == userId"
                                  class="
                                    ipng
                                    fr
                                    but_edit01
                                    i_editVideo
                                    editnote
                                  "
                                  title="编辑"
                                  @click="editNote(item)"
                                ></i>
                              </div>
                            </div>
                          </li>
                          <div
                            v-if="allNoteData.length == 0"
                            class="no-data-tip"
                          >
                            - 暂无数据 -
                          </div>
                        </ul>
                      </vue-scrollbar>
                    </el-tab-pane>
                  </el-tabs>
                </template>
              </div>
            </template>
          </div>
        </section>
      </div>
    </section>
    <!-- 直播的介绍 -->
    <section class="live-info-detail">
      <div class="live-info-container">
        <h2>{{ bigLiveData.name }}</h2>
        <div class="live-info">
          <span>
            <i class="clock-icon"></i>
            <i class="time-string">{{ bigLiveData.end_time }}</i>
          </span>
          <span>
            <i class="man-icon"></i>
            <i class="online-counts">{{ onlineCounts }}</i>
            人在线
          </span>
          <span>
            <i class="more-icon"></i>
            <i class="grade-info">{{ bigLiveData.category }}</i>
          </span>
        </div>
        <p>{{ bigLiveData.profile }}</p>
      </div>
    </section>
    <!-- 查看截图 -->
    <el-dialog class="seePicDialog" width="60%" :visible.sync="dialogPicVisible"
      ><img :src="BASE_URL + seeImg"
    /></el-dialog>
  </div>
</template>

<script>
import livePlayer from "./livePlayer/player";
import VueScrollbar from "vue2-scrollbar";
import { setInterval } from "timers";
import m3u8Dplayer from "@/components/common/m3u8Dplayer"
require("vue2-scrollbar/dist/style/vue2-scrollbar.css");
import share from "../../common/share";

export default {
  components: {
    livePlayer,
    VueScrollbar,
    share,
    m3u8Dplayer
  },
  data() {
    return {
      isM3u8: 2,
      userId: this.$g.user_id, //当前用户的id
      liveId: this.$route.query.id, //当前直播的id
      bigLiveData: {}, //当前直播详细数据
      isLimited: false,
      //当前直播视频信息：
      onlineCounts: 0,
      // 讨论区/笔记
      chatWS: null,
      isDiscuss: true,
      activeDiscuss: "1",
      activeNote: "1",
      //评论区
      isTeacher: "", //是否是老师发言
      discussData: [],
      content: "",
      forbidFlag: false, //没被禁言
      // 在线成员
      onlineUserId: [], //所有在线用户的id
      onlineUserData: [],
      // 笔记
      allNoteData: [],
      // 个人笔记
      noteLoading: false, //新增加载提示
      myNoteContent: "",
      shootFlag: false,
      myNoteEdit: "",
      editLoading: false, //编辑加载提示
      noteId: null, //笔记id用于编辑功能
      contentEdited: "",
      // 查看图片
      dialogPicVisible: false,
      seeImg: "",
      //弹幕
      barrageOrNot:
        localStorage.getItem("teaching_schedule_barrage") === "true"
          ? true
          : false,
      barrage: null, //弹幕对象
      m3u8Data: {
				pc_play_url: '',
			},
    };
  },
  created() {
    this.getIsFlv();
    this.getVideo();
    this.getDiscussList();
    this.checkForbidden();
    this.getLiveNote();
    this.chatWebsocket();
    this.getM3u8Data()
  },
  mounted() {
    this.checkUserLogin();
    this.barrage = this.$start(this.$refs.barrage_wrap, [0.1, 0.9]); //弹幕
  },
  computed: {
    wapPath() {
      const Code = sessionStorage.getItem("CheckSchoolAppCode");
      return `${window.location.origin}/wap/home?path=sinatvDetails&bdShare=true&id=${this.liveId}&CheckSchoolAppCode=${Code}`;
    },
  },
  beforeDestroy() {
    this.chatWS && this.chatWS.onclose();
  },
  methods: {
    getIsFlv() {
      let success = res => {
        this.isM3u8 = res.data.m3u8_show
      }
      let fail = res => {
        this.isM3u8 = 2
      }
      this.$ajax({
        url: '/api/video/live_app_show',
        method: 'get',
        params: {
          type: 1,
        },
        func: { success, fail }
      })
    },
    getM3u8Data() {
			let success = res => {
				this.m3u8Data.pc_play_url = res.data.hls_live_path
			}

			this.$ajax({
				url: '/appapi/live/getLiveHls',
				method: 'get',
				params: {
					id: this.liveId,
				},
				func: { success: success }
			})
		},
    //查看一下用户有没有登录，若没登录，则不给看直播
    checkUserLogin() {
      let success = (res) => {
        if (res.data == "no") {
          this.$message.warning("该直播需要登录才能观看");
          this.$router.push("/home/liveList");
        }
      };
      let fail = (res) => {};
      this.$ajax({
        url: "api/setting/check_video_live_user",
        method: "get",
        params: {
          type: 1,
        },
        func: {
          success: success,
          fail: fail,
        },
      });
    },
    // 获取直播的视频数据：
    getVideo() {
      let success = (data) => {
        //视频信息
        if (data.data._status === 1) {
          this.$message.warning("直播未开始");
          this.$router.push({ path: "/home/liveList" });
          return;
        }
        if (data.data.end_time_secon == 0) {
          this.$message.warning("直播已结束");
          this.$router.push({ path: "/home/liveList" });
          return;
        }
        this.bigLiveData = data.data;
        // console.log(this.bigLiveData)
        this.addLiveRecord();
      };
      let fail = (data) => {
        this.$router.push({ path: "/home/liveList" });
      };
      this.$ajax({
        url: "api/live/live",
        method: "get",
        params: {
          liveid: this.liveId,
        },
        func: {
          success: success,
          fail: fail,
        },
      });
    },
    checKLimted(flag) {
      this.isLimited = flag;
    },
    tabTool() {
      this.isDiscuss = !this.isDiscuss;
    },
    //添加直播记录
    addLiveRecord() {
      let success = (data) => {};
      this.$ajax({
        url: "api/live/live_user_list",
        method: "post",
        data: {
          id: this.liveId,
        },
        func: {
          success: success,
        },
      });
    },

    // 讨论区
    getDiscussList() {
      let success = (res) => {
        this.discussData = res.data;
        if (res.data.length != 0) {
          this.someMethod();
        }
      };
      this.$ajax({
        url: "api/live/live_discuss",
        method: "get",
        params: {
          liveid: this.liveId,
          is_teacher: this.isTeacher,
        },
        func: {
          success: success,
        },
      });
    },

    //检查是否被禁言
    checkForbidden() {
      let success = (res) => {
        this.forbidFlag = res.data == "true" ? true : false;
      };
      this.$ajax({
        url: "api/live/check_forbidden",
        method: "get",
        params: {
          liveid: this.liveId,
          now_userid: this.userId,
        },
        func: {
          success: success,
        },
      });
    },
    // 发送讨论信息的按钮
    sendComment() {
      if (this.userId == 0) {
        this.$message.error("该功能仅登录后可用");
        return;
      }
      let success = (res) => {
        if (res.data == "true") {
          this.$message.warning("您被禁言了");
        } else {
          if (this.content == "") {
            this.$message.warning("请输入讨论内容");
            return;
          }
          let message = JSON.stringify({
            type: "say",
            room_id: this.liveId,
            content: this.content,
          });
          this.chatWS.send(message);
          this.content = ""; //清空输入框
        }
      };
      this.$ajax({
        url: "api/live/check_forbidden",
        method: "get",
        params: {
          liveid: this.liveId,
          now_userid: this.userId,
        },
        func: {
          success: success,
        },
      });
    },
    //滚动条
    someMethod() {
      this.$nextTick(function () {
        let dicussUl = document.getElementById("dicussUl");
        if (dicussUl && dicussUl.clientHeight > 644) {
          this.$refs.Scrollbar.scrollToY(dicussUl.clientHeight);
        }
      });
    },
    //讨论区发信息连接的websocket
    chatWebsocket() {
      this.chatWS && this.chatWS.onclose();
      let str = "ws:" + this.BASE_URL.split(":")[1] + ":7373";
      this.chatWS = new WebSocket(str);
      //加载时向gateway发送信息定义房间号
      this.chatWS.onopen = () => {
        var message = JSON.stringify({
          type: "login",
          uid: this.userId,
          room_id: this.liveId,
        });
        this.chatWS.send(message);
        // console.log('已连接上...,发送身份信息：' + message)
      };
      this.chatWS.onmessage = (evt) => {
        var data = JSON.parse(evt.data);
        switch (data.type) {
          case "receive":
            this.discussData.push(data.data);
            this.someMethod();
            //弹幕滚动
            this.barrageOrNot &&
              this.barrage({
                text: data.data.content,
                color: this.userId == data.data.create_id ? "#dc2904" : "#fff",
                speed: 3,
                classname: 1,
                size: 24,
              });
            break;
          case "all_count": //统计所有在线人数，一个页面相当于一个客户端
            // console.log('在线人数',data.num)
            // this.onlineCounts = data.num;
            break;
          case "user_count": //统计所有登录用户在线人数
            // console.log('统计所有登录用户在线人数',data.all_uid)
            this.onlineUserId = Object.values(data.all_uid);
            this.getOnlineUser();
            break;
          case "sendError": //敏感词
            this.$message.error(data.data);
            break;
          default:
            break;
        }
      };
      this.chatWS.onclose = () => {
        this.chatWS.close();
      };
    },
    // 弹幕
    changeBarrageStatus() {
      this.barrageOrNot = !this.barrageOrNot;
      localStorage.setItem("teaching_schedule_barrage", this.barrageOrNot);
    },
    //获取所有登录用户的数据
    getOnlineUser() {
      let success = (res) => {
        this.onlineUserData = res.data;
        this.onlineCounts = res.data.length;
      };
      this.$ajax({
        url: "api/live/live_online_user_list",
        method: "get",
        params: {
          live_id: this.liveId,
          uid: this.onlineUserId,
        },
        func: {
          success: success,
        },
      });
    },
    // 成员菜单栏：点击图标禁言/解除禁言
    forbidWords(id, type) {
      let success = (data) => {
        this.checkForbidden();
        this.getOnlineUser();
        this.$message.success(data.msg);
      };
      this.$ajax({
        url: "api/live/add_forbidden",
        method: "post",
        data: {
          liveid: this.liveId,
          user_id: id,
          now_userid: this.userId,
          forbidden_type: type,
        },
        func: {
          success: success,
        },
      });
    },
    // 获取大家的笔记
    getLiveNote() {
      let success = (data) => {
        this.allNoteData = data.data;
      };
      this.$ajax({
        url: "api/live/live_note",
        method: "get",
        params: {
          liveid: this.liveId,
        },
        func: {
          success: success,
        },
      });
    },
    //添加个人笔记
    addPersonNote() {
      if (this.userId == 0) {
        this.$message.error("该功能仅登录后可用");
        return false;
      }
      if (this.myNoteContent == "") {
        this.$message.error("笔记内容不能为空");
        return false;
      }
      this.noteLoading = true; //加载提示
      let success = (data) => {
        this.myNoteContent = "";
        this.shootFlag = false;
        this.getLiveNote();
        this.noteLoading = false;
        this.$message.success("添加直播笔记成功");
      };
      let fail = (data) => {
        this.myNoteContent = "";
        this.shootFlag = false;
        this.noteLoading = false;
        this.$message.error("添加直播笔记失败");
      };
      this.$ajax({
        url: "api/live/live_note",
        method: "post",
        data: {
          live_id: this.liveId,
          content: this.myNoteContent,
          create_id: this.userId,
          jietu: this.shootFlag == false ? 0 : 1,
        },
        func: {
          success: success,
          fail: fail,
        },
      });
    },
    // 点击删除笔记图标：
    delNote(item) {
      // console.log(item);
      this.$confirm("你确定要删除吗？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "removeing",
      })
        .then(() => {
          let success = (res) => {
            this.$message.success(res.msg);
            this.getLiveNote();
          };
          this.$ajax({
            url: "api/live/live_note",
            method: "delete",
            params: {
              live_noteid: item.id,
            },
            func: { success: success },
          });
        })
        .catch(() => {});
    },
    // 点击编辑笔记图标：
    editNote(item) {
      if (item.id == this.noteId) {
        this.noteId = null;
      } else {
        this.noteId = item.id;
        this.contentEdited = item.content;
      }
    },
    // 确定编辑按钮：
    sureEditNote() {
      if (this.contentEdited == "") {
        this.$message.error("笔记内容不能为空");
        return false;
      }
      this.editLoading = true; //加载提示
      let success = (data) => {
        this.contentEdited = "";
        this.getLiveNote();
        this.editLoading = false;
        this.$message.success("修改直播笔记成功");
        this.noteId = null; //隐藏编辑的输入框
      };
      let fail = (data) => {
        this.contentEdited = "";
        this.editLoading = false;
        this.$message.error("修改直播笔记失败");
        this.noteId = null;
      };
      this.$ajax({
        url: "api/live/live_note",
        method: "put",
        data: {
          user_id: this.userId,
          content: this.contentEdited,
          live_noteid: this.noteId,
        },
        func: {
          success: success,
          fail: fail,
        },
      });
    },
    // 查看（图片）
    seePic(item) {
      this.dialogPicVisible = true;
      this.seeImg = item.picture;
    },
    // 检测到直播被删除时，跳回直播列表页
    checkLiveEnd(flag) {
      if (flag) {
        this.$message.warning("直播已结束");
        setTimeout(() => {
          this.$router.push({ path: "/home/liveList" });
        }, 500);
      }
    },
    // 回上一页
    back() {
      this.$router.push({ path: "/home/liveList" });
    },
  },
};
</script>
<style lang="scss">
.live-room {
  min-height: calc(100vh - 44px);
  overflow: hidden;

  .videoPlayer-dimensions.vjs-fluid {
    padding-top: 49.5%;
  }

  .emoji {
    width: 25px;
    height: 25px;
  }

  .room-title {
    background: #ffffff;
    padding: 15px 35px;
    box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
  }

  .room-title-link {
    cursor: pointer;

    i,
    strong {
      vertical-align: middle;
    }

    strong {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-left: 15px;
    }
  }

  .room-share {
    .a-tit {
      height: 28px;
      line-height: 28px;
      font-size: 14px;
      color: #656e6c;
      margin-right: 10px;
    }
  }

  .loading-box {
    height: calc(100% - 307px);
    min-height: calc(100vh - 100px);
  }

  .room-content {
    padding: 40px 0;
  }

  .live-view-box {
    max-width: 1875px;
    margin: 0 auto;
    height: 802px;
  }

  .live-view-l {
    display: inline-block;
    width: 1496/1875 * 100%;
    .video-box {
      display: inline-block;
      width: 100%;
      height: 740px;
      position: relative;
      .barrage {
        font-size: 24px;
      }
    }
  }
  .barrage-switch {
    height: 62px;
    line-height: 62px;
    background-color: #fff;
    cursor: pointer;

    span {
      display: inline-block;
      width: 80px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 13px;
      font-size: 12px;
      margin-left: 20px;
      background-color: #3a486f;
      color: #fff;
    }

    .white-switch {
      background-color: #999;
    }
  }

  .live-view-r {
    display: inline-block;
    width: 360/1875 * 100%;
    height: 100%;
    background-color: #fff;

    nav {
      span {
        display: inline-block;
        width: 100%;
        // width: 50%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;

        i {
          vertical-align: middle;
          font-size: 14px;
          margin: 0 4px;
        }
      }

      .lActive {
        color: #4298b1;
        background: #a8ecfd;
      }
    }

    .view-r-tabs {
      margin-top: 20px;

      .el-tabs__nav {
        margin-left: 20px;
      }

      .el-tabs__header {
        margin: 0;
      }
    }

    .green-c {
      color: #3bb080;
    }

    .discuss-scrollbar {
      height: 641px;
    }

    .vue-scrollbar__scrollbar-vertical {
      width: 6px;
    }
    .vue-scrollbar__scrollbar-vertical .scrollbar {
      width: 6px;
      background-color: #338efc;
      border-radius: 2px;
    }

    .vue-scrollbar__scrollbar-vertical .scrollbar:hover {
      width: 6px;
      background-color: #000;
      border-radius: 2px;
    }
    .but_addamage {
      margin-right: 10px;
    }

    .discuss-ul {
      box-sizing: border-box;
      font-size: 12px;
      color: #020202;
      padding: 20px 0;

      li {
        padding: 0 20px;
      }

      .speaker-name {
        display: inline-block;
        width: 80px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-right: 25px;
        line-height: 25px;
        float: left;
      }

      .speak-words {
        display: inline-block;
        width: calc(100% - 120px);
        line-height: 25px;
        float: left;
        word-wrap: break-word;
        word-break: break-word;
      }
    }

    .sendcomment-box {
      border-top: 1px solid #e0e0e0;
      padding: 10px 20px;

      .el-button {
        border-radius: 0 4px 4px 0;
        color: #fff;
        background-color: #338efc;
        border: 1px solid #338efc;
      }
    }

    .member-scrollbar {
      height: 702px;
    }

    .member-ul {
      font-size: 12px;
      color: #020202;
      padding-top: 10px;

      li {
        padding: 0 20px;
        height: 30px;
        line-height: 30px;
        margin-bottom: 10px;
      }

      .member-name {
        display: inline-block;
        width: 80px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-right: 20px;
        float: left;
      }

      .member-identity {
        width: 160px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        float: left;
      }

      .mic-icon-allow,
      .mic-icon-forbid {
        float: right;
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: pointer;
      }

      .mic-icon-allow {
        background: url(../../../assets/images/ipng.png) -610px -732px no-repeat;
      }

      .mic-icon-forbid {
        background: url(../../../assets/images/ipng.png) -570px -732px no-repeat;
      }
    }
  }

  .live-info-detail {
    // max-width: 1875px;
    background-color: #fff;
    min-height: 205px;
    overflow: hidden;
    // margin: 20px auto 0;

    .live-info-container {
      padding: 0 25px;
    }

    h2 {
      font-size: 16px;
      font-weight: 600;
      margin: 40px 0 25px;
    }

    .live-info {
      margin-bottom: 30px;

      span {
        display: inline-block;
        height: 18px;
        line-height: 18px;
        margin-right: 25px;
        color: gray;
      }

      i {
        vertical-align: middle;
      }

      .clock-icon,
      .man-icon,
      .more-icon {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 5px;
      }

      .clock-icon {
        background: url("../../../assets/images/clock-icon.png") no-repeat;
      }

      .man-icon {
        background: url("../../../assets/images/man-icon.png") no-repeat;
      }

      .more-icon {
        background: url("../../../assets/images/more-icon.png") no-repeat;
      }
    }

    p {
      padding-right: 80px;
      line-height: 20px;
      font-size: 14px;
    }
  }

  .note-content {
    .textarea {
      padding: 15px 10px;
      position: relative;

      .numberWord {
        position: absolute;
        bottom: 20px;
        right: 15px;

        i:nth-child(1) {
          color: #606266;
        }

        i:nth-child(2) {
          color: #dcdfe6;
        }
      }
    }

    .shoot-img {
      padding-bottom: 25px;
      border-bottom: 1px solid #e0e0e0;

      i {
        margin: 0 10px;
      }

      .el-button {
        width: 78px;
        height: 30px;
        padding: 0;
        margin-right: 10px;
      }
    }

    .myNote-scrollbar {
      height: 520px;
    }

    .allNote-scrollbar {
      height: 702px;
    }

    .note-ul {
      .note-li {
        padding: 20px 0;
        margin: 0 20px;
        border-bottom: 1px solid #e0e0e0;

        a {
          display: block;
          float: left;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            vertical-align: top;
          }
        }

        .note-li-text {
          margin-left: 60px;

          &:hover {
            .delnote,
            .editnote {
              visibility: visible;
              opacity: 1;
            }
          }

          .note-creater {
            display: block;
            font-size: 12px;
            line-height: 19px;
            color: #666666;
            margin-bottom: 10px;
          }

          .note-content {
            font-size: 14px;
            line-height: 21px;
          }

          .edit-content-box {
            .textarea {
              padding: 15px 0px;
            }

            .el-button {
              width: 78px;
              height: 30px;
              padding: 0;
            }
          }

          .note-li-bottom {
            margin-top: 15px;

            span {
              color: #2f6d8c;
              font-size: 12px;
              line-height: 20px;
            }

            i {
              margin-left: 10px;
              cursor: pointer;
              visibility: hidden;
              opacity: 0;
            }
          }
        }
      }
    }
  }

  .img-card {
    position: relative;
    margin: 10px;

    .el-card__body {
      height: 100px;

      img {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
  }

  .tips-word {
    visibility: hidden;
    opacity: 0;
    width: 100%;
    height: 140px;
    line-height: 140px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(144, 147, 153, 0.5);
    text-align: center;

    span {
      padding: 20px;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 5px;
      border: 2px dashed #fff;
      color: #fff;
      cursor: pointer;
    }
  }

  .img-card .el-card__body:hover > .tips-word {
    visibility: visible;
    opacity: 1;
  }

  .seePicDialog {
    .el-dialog__header {
      padding: 0;
    }

    .el-dialog__headerbtn {
      border-radius: 50%;
      top: -12px;
      right: -12px;
      padding: 3px;
      background-color: #fff;

      .el-dialog__close {
        padding: 3px;
        border-radius: 50%;
        background-color: #666;
        color: #fff;
      }

      .el-dialog__close:hover {
        background-color: #409eff;
      }
    }
  }

  .areaDialog {
    .el-dialog__header {
      background-color: #338efc;
      padding: 8px 20px 8px;
    }

    .el-dialog__body {
      padding: 30px 40px 40px;

      span {
        line-height: 32px;
        margin: 0 10px;
      }
    }

    .el-dialog__title {
      color: #fff;
      font-size: 14px;
    }

    .el-dialog__headerbtn {
      top: 8px;
    }

    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 24px;
    }

    .el-dialog__headerbtn .el-dialog__close:hover {
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .member-tab-pane {
    position: relative;

    .member-tips {
      position: absolute;
      bottom: 4px;
      left: 4px;
      font-size: 12px;
      color: #999;
      z-index: 0;
    }
  }
  .no-data-tip {
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
  }
}
</style>